<template>
    <g class="editor-element active" 
        :id="`item_${attr.idx}`" 
        @click="itemClick"
        @mousedown.left.stop
        @click.stop >
        <image class="light-image" 
            :x="attr.x" 
            :y="attr.y" 
            :width="attr.width" 
            :height="attr.height" 
            preserveAspectRatio="none" 
            :xlink:href="attr.stateIcon[attr.state]"/>           
        <dragItem  :attr="attr"  @dragDown="dragDown"></dragItem>
        <resizeItem :attr="attr" @resizeDown="resizeDown"></resizeItem>
    </g>
</template>
<script>
import dragItem from './../dragItem/index'
import resizeItem from './../resizeItem/index'
export default {
    name:'switchItem',
    components: { resizeItem,dragItem },
    props:{        
        attr:{type:Object,default:{}}
    },
    methods:{
        itemClick:function(event){         
            if(event.ctrlKey && this.attr.selected) {
                this.attr.onUnChecked(this.attr,event)();
            }else{
                this.attr.onChecked(this.attr,event)();
            } 
        },       
        resizeDown:function(resizeType){
            this.attr.onResizeDown(this.attr.idx,resizeType)();
        },
        dragDown:function(event){
            this.attr.onDragDown(this.attr.idx,event)();
        }
    }
}
</script>
<style scoped lang="scss">
.item-shadow{
    border:1px #ff000059 solid;
    word-break: break-all; 
    overflow-wrap: break-word; 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
    box-sizing: border-box;
    background-color: rgba(0,0,0,0.1);
    cursor: move;
}

</style>